<template>
  <a-drawer
    width="1200"
    closable
    placement="right"
    :visible="visible"
    @close="visible=false"
  >

    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">项目详情</div>
      <div style="font-size: 12px;margin-left: 30px;color: #333333;">姓名：{{row_record.name}}</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">卡号：{{row_record.cardNo}}</div>
    </div>
    <a-table
      size="small"
      bordered
      :scroll="{x:1000}"
      :columns="columns"
      :data-source="tableData"
      :rowKey="(record,index)=> index"
    >
    </a-table>
  </a-drawer>
</template>

<script>
import { PaymentDetails } from '@/api/modular/main/customer/cashier'
export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{{}}
    }
  },
  data () {
    return {
      visible:false,
      tableData:[],
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 20, //每页中显示数据的条数
      },
      pagination: {
        current: 1, //当前页
        pageSize: 20, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      form: this.$form.createForm(this),
      columns: [
        { title: '序号', customRender: (text, record, index) => (this.queryParam.pageNum - 1) * this.pagination.pageSize + (index + 1), width: 50 },
        {
          title: '基本信息',
          children: [
            { title: '收款类型', dataIndex: 'rpTypeId',customRender: (text) => text=='1'?'项目收费':(text=='2'?'产品收费':text), width: 60,ellipsis: true },
            { title: '收款日期', dataIndex: 'rpDate', width: 60},
            { title: '收银员', dataIndex: 'rpMan',width: 60},
            { title: '收款金额', dataIndex: 'rpAmt', width: 60},
          ],
        },
        {
          title: '收付款方式',
          children: [
            { title: '现金', dataIndex: 'xj', width: 50 },
            { title: '刷卡', dataIndex: 'sk', width: 50},
            { title: '转账', dataIndex: 'zz', width: 50},
            { title: '预存抵扣', dataIndex: 'yck', width: 60},
            { title: '增值抵扣', dataIndex: 'zzj', width: 60 },
            { title: '消费券抵扣', dataIndex: 'xfj', width: 70 },
            // { title: '会员卡抵扣', dataIndex: 'yck', width: 80,ellipsis: true },
          ],
        },
        {
          title: '其他信息',
          children: [
            { title: '收付款单号', dataIndex: 'orderId', width: 80},
            { title: '摘要', dataIndex: 'adstract', width: 50, ellipsis: true},
            { title: '备注', dataIndex: 'remark', width: 50, ellipsis: true},
          ],
        }
      ],
    }
  },
  methods: {
    show () {
      this.visible = true
      this.$nextTick(() => {
        this.spinning = true
        const orderId = this.row_record.orderId
        PaymentDetails({ orderId }).then(res => {
          this.spinning = false
          // console.log('已收费-项目收款详情', res.data)
          this.tableData = res.data
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>

</style>

